<!--  -->
<template>
  <a-modal
    :title="title"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :width="666"
    :ok-button-props="{ props: { disabled: operationDisabled } }"
    :destroyOnClose="true"
  >
    <a-form-model
      ref="ruleForm"
      :model="model"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="角色名称" ref="roleName" prop="roleName">
        <a-input
          placeholder="请输入角色名称"
          allowClear
          v-model="model.roleName"
        />
      </a-form-model-item>
      <a-form-model-item label="角色编码" ref="roleCode" prop="roleCode">
        <a-input
          placeholder="请输入角色编码"
          allowClear
          v-model="model.roleCode"
          :disabled="disabled"
        />
      </a-form-model-item>

      <a-form-model-item label="使用状态" ref="roleStatus" prop="roleStatus">
        <!-- <a-radio-group name="radioGroup" v-model="model.roleStatus">
          <a-radio :value="0"> 启用 </a-radio>
          <a-radio :value="1"> 禁用 </a-radio>
                                                </a-radio-group> -->
        <a-select placeholder="使用状态" v-model="model.roleStatus">
          <a-select-option :value="0"> 启用 </a-select-option>
          <a-select-option :value="1"> 禁用 </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="角色描述" ref="roleDesc" prop="roleDesc">
        <a-input
          placeholder="请输入角色描述"
          allowClear
          v-model="model.roleDesc"
        />
      </a-form-model-item>
      <a-form-model-item label="可查看资源" ref="ids" prop="ids">
        <div class="tree">
          <a-tree
            checkable
            :expandedKeys="expandedKeys"
            :checkedKeys="checkedKeys"
            :treeData="treeData"
            @expand="onExpand"
            @check="onCheck"
            checkStrictly
            defaultExpandAll
            showLine
          >
          </a-tree>
        </div>
      </a-form-model-item>
      <!-- <a-form-model-item label="可使用接口" ref="idsA" prop="idsA">
        <a-tree checkable :expandedKeys="expandedKeysA" :checkedKeys="checkedKeysA" :treeData="treeDataA"
          @expand="onExpandA" @check="onCheckA" checkStrictly defaultExpandAll autoExpandParent>
        </a-tree>
                                              </a-form-model-item> -->
    </a-form-model>
  </a-modal>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { model, rules } from "./save";
import { deepChildById } from "@/utils/TreeUtil";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Modal",
  props: {},
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      api: {
        detail: "/admin_server/auth/role/", // 角色详情
        save: "/admin_server/auth/role/save", // 新增
        update: "/admin_server/auth/role/update", // 修改
        permissionTree: "/admin_server/auth/role/permissionTree", // 资源树形信息
      },
      visible: false,
      confirmLoading: false,
      model,
      rules,
      disabled: false,
      labelCol: { span: 5 },
      wrapperCol: { span: 17 },

      operationDisabled: false,
      id: undefined,
      title: undefined,

      // 资源相关
      treeData: [], // 树形元数据
      expandedKeys: [], // 展开的key
      checkedKeys: [], // 选中节点

      // 接口相关
      treeDataA: [], // 树形元数据
      expandedKeysA: [], // 展开的key
      checkedKeysA: [], // 选中节点
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    resetForm() {
      // this.$refs.ruleForm.resetFields();
      Object.keys(this.model).forEach((key) => (this.model[key] = ""));
      this.model.roleStatus = 0;
      this.disabled = false;
    },
    /**
     * 回显
     */
    init(id, operationDisabled, title, data, dataA) {
      this.title = title;
      this.operationDisabled = operationDisabled;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields();
      });
      this.treeData = data;
      this.treeDataA = dataA;
      this.expandedKeys = deepChildById(this.treeData);
      this.expandedKeysA = deepChildById(this.treeDataA);
      this.checkedKeys = [];
      this.checkedKeysA = [];
      if (id) {
        this.confirmLoading = true;
        this.disabled = true;
        this.$request.getRequest1(this.api.detail + id).then((res) => {
          if (res.success) {
            this.model.id = res.result.id;
            this.model.roleName = res.result.roleName;
            this.model.roleCode = res.result.roleCode;
            this.model.roleDesc = res.result.roleDesc;
            this.model.roleStatus = res.result.roleStatus;
            this.$nextTick(() => {
              this.checkedKeys = res.result.ids;
              this.checkedKeysA = res.result.idsA;
              this.model.ids = res.result.ids;
              this.model.idsA = res.result.idsA;
            });
          }
          this.confirmLoading = false;
        });
      } else {
        this.resetForm();
      }
    },
    /**
     * 树形结构选中时
     */
    // eslint-disable-next-line no-unused-vars
    onCheck({ checked }) {
      // 选中的节点为选中的和半选中的节点
      this.checkedKeys = checked;
    },
    /**
     * 展开树形结构
     */
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
    },

    /**
     * 树形结构选中时
     */
    // eslint-disable-next-line no-unused-vars
    onCheckA({ checked }) {
      // 选中的节点为选中的和半选中的节点
      this.checkedKeysA = checked;
    },
    /**
     * 展开树形结构
     */
    onExpandA(expandedKeys) {
      this.expandedKeysA = expandedKeys;
    },

    handleCancel() {
      this.visible = false;
    },
    /**
     * 提交
     */
    handleOk() {
      this.model.ids = this.checkedKeys;
      this.model.idsA = this.checkedKeysA;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          if (this.model.id) {
            this.$request
              .postRequest2(this.api.update, this.model)
              .then((res) => {
                if (res.success) {
                  this.$message.success("更新成功");
                  this.$emit("handleOk");
                }
                this.confirmLoading = false;
              });
          } else {
            this.$request
              .postRequest2(this.api.save, this.model)
              .then((res) => {
                if (res.success) {
                  this.$message.success("添加成功");
                  this.$emit("handleOk");
                }
                this.confirmLoading = false;
              });
          }
        }
      });
    },
  },
  mounted() {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.tree {
  height: 300px;
  overflow-y: scroll;
}
</style>